<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>添加信用卡</title>
	<link rel="stylesheet" href="css/amazeui.min.css" />
	<link rel="stylesheet" href="css/app.css" />
	<link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
	<script src="assets/js/jquery.min.js" type="text/javascript"></script>
	<script src="js/amazeui.min.js" type="text/javascript"></script>

	<style>
		body {
			max-width: 640px;
			margin: 0 auto;
			font-size: 10px;
			background: #F2F3F8;
		}

		* {
			box-sizing: border-box;
		}

		[class*=am-u-] {
			padding: 0;
		}
	</style>
</head>

<body>
	<!--头部-->
	<header class="am-u">
		<div class="am-u-sm-12 head_nav" style="margin:0;">
			<div class="am-u-sm-2 am-vertical-align" style="text-align: center;">
				<a href="reimbursement1.html">
					<img src="img/return@2x.png" class="am-vertical-align-middle" alt="" />
				</a>
			</div>
			<div class="am-u-sm-8 head_text">
				添加信用卡
			</div>
			<div class="am-u-sm-2" style="color: #fff;font-size: 13px;text-align: center;">

			</div>
		</div>
	</header>
	<div style="clear: both;"></div>
	<div class="am-u">
		<!--			<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
				<div class="am-u-sm-3">
					<span >姓名</span>
				</div>
				<div class="am-u-sm-9" style="text-align: right;">
					<input type="text" placeholder="持卡人姓名" dir='rtl'/>
				</div>
			</div>
			<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
				<div class="am-u-sm-3">
					<span >身份证</span>
				</div>
				<div class="am-u-sm-9" style="text-align: right;">
					<input type="text" placeholder="持卡人身份证" dir='rtl'/>
				</div>
			</div>-->
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-3">
				<span>卡号</span>
			</div>
			<div class="am-u-sm-9" style="text-align: right;">
				<input type="text" id="cardNo" placeholder="请添加信用卡号" dir='rtl' />
			</div>
		</div>
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-3">
				<span>CVN2</span>
			</div>
			<div class="am-u-sm-9" style="text-align: right;">
				<input id="cvn2" type="text" placeholder="信用卡背面CVN2后三位" dir='rtl' />
			</div>
		</div>
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-3">
				<span>有效期</span>
			</div>
			<div class="am-u-sm-9" style="text-align: right;">
				<input id="PeriodValidity" type="text" placeholder="请输入有效期丨月/年如0917" dir='rtl' />
			</div>
		</div>
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-3">
				<span>发卡银行</span>
			</div>
			<div class="am-u-sm-9" style="text-align: right;">
				<select id="cardName">
					<option value="">请选择银行</option>
				</select>
			</div>
		</div>
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-3">
				<span>账单日</span>
			</div>
			<div class="am-u-sm-9" style="text-align: right;">
				<select id="statement_date">
					<option value="">请选择账单日</option>
				</select>
			</div>
		</div>
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-3">
				<span>还款日</span>
			</div>
			<div class="am-u-sm-9" style="text-align: right;">
				<select id="repayment_date">
					<option value="">请选择还款日</option>
				</select>
			</div>
		</div>
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-3">
				<span>手机号码</span>
			</div>
			<div class="am-u-sm-9" style="text-align: right;">
				<input id="phone" type="text" placeholder="银行预留手机号码" dir='rtl' />
			</div>
		</div>
		<div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
			<div class="am-u-sm-6 am-vertical-align">
				<input id="code" type="text" class="am-vertical-align-middle" style="padding:0;" placeholder="请输入验证码" />
			</div>
			<div class="am-u-sm-6 am-vertical-align" style="text-align: right;">
				<button type="button" id="huoqu_btn" class="am-vertical-align-middle" style="border:0;color:#41A0F0;background:transparent;font-size:14px;">获取验证码</button>
			</div>
		</div>
		<!--			<div class="am-u-sm-12 " style="padding:0 0 0 10px ;border-bottom: 1px solid #D8D8D8;height: 40px;">
				<div style="font-size: 12px;color: #848484; ">
					注：添加信用卡即做一笔10元的消费交易作为验证信用卡的正确性
				</div>
			</div>-->
	</div>
	<div style="clear: both;"></div>
	<div style="padding: 15px;padding-bottom: 5px;margin-top: 2%;">
		<button class="am-btn" id="tj_btn" style="background: #0165C7;color: #fff;width: 100%;border-radius: 5px;">添加信用卡</button>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script src="js/loading.js"></script>
	<script>
		var token1 = sessionStorage['token'];
		var method1 = "addcardbag";
		var hh1 = "<option value=''>请选择账单日</option>";
		var hh2 = "<option value=''>请选择还款日</option>";
		for (var i = 1; i < 32; i++) {
			hh1 += "<option value=''>" + i + "日" + "</option>";
			hh2 += "<option value=''>" + i + "日" + "</option>";
		}
		$("#statement_date").html(hh1);
		$("#repayment_date").html(hh2);
		$.ajax({
			type: 'POST',
			url: "http://www.rice.com/app/api/h5_access",
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			datatype: "JSON",
			data: {
				method: "get_bank"
			},
			success: function (data) {
				var data1 = JSON.parse(data);
				if (data1.status === 1) {
					var html = "";
					for (var i in data1.data.bank_data) {
						html += "<option bank_code='" + data1.data.bank_data[i].bank_code + "' bank_simple_code='" + data1.data.bank_data[
							i].bank_simple_code + "'>" + data1.data.bank_data[i].bank_name + "</option>";
					}
					$("#cardName").html(html);
				} else if (Number(data1.status) == 2) {
					alert(data1.message);
					window.location.href = "login.html";
				} else {
					alert(data1.message);
				}
			}
		});
		//                        验证码
		$("#huoqu_btn").on("click", function () {
			var cardNo1 = $("#cardNo").val();
			var phone1 = $("#phone").val();
			if (cardNo1 == "" || cardNo1 == null) {
				alert("请输入信用卡号");
				return false;
			}
			if (phone1 == "" || phone1 == null) {
				alert("请输入手机号");
				return false;
			}
			$.ajax({
				type: 'POST',
				url: "http://www.rice.com/app/api/h5_access",
				contentType: "application/x-www-form-urlencoded; charset=utf-8",
				datatype: "JSON",
				data: {
					method: "Bankcredit|sendmsg",
					token: token1,
					cardNo: cardNo1,
					phone: phone1
				},
				success: function (data) {
					var data1 = JSON.parse(data);
					if (data1.status === 1) {
						var time = 180;
						$('#huoqu_btn').html(time + "秒后重发").attr('disabled', true);
						setInterval(function () {
							time--;
							if (time === 0) {
								$('#huoqu_btn').html("发送验证码").attr('disabled', false);

							} else if (time > 0) {
								$('#huoqu_btn').html(time + "秒后重发").attr('disabled', true);
							}

						}, 1000);
					} else if (Number(data1.status) == 2) {
						alert(data1.message);
						window.location.href = "login.html";
					} else {
						alert(data1.message);
					}
				}
			});
		})
		//                        提交
		$("#tj_btn").on("click", function () {
			var cardNo1 = $("#cardNo").val();
			var phone1 = $("#phone").val();
			var cvn21 = $("#cvn2").val();
			var PeriodValidity1 = $("#PeriodValidity").val();
			var cardName1 = $("#cardName").find("option:selected").text();
			var statement_date1 = $("#statement_date").find("option:selected").text();
			var repayment_date1 = $("#repayment_date").find("option:selected").text();
			var code1 = $("#code").val();
			if (cardNo1 == "" || cardNo1 == null) {
				alert("请输入信用卡号");
				return false;
			}
			if (cvn21 == "" || cvn21 == null) {
				alert("请输入CVN2后三位");
				return false;
			}
			if (PeriodValidity1 == "" || PeriodValidity1 == null) {
				alert("请输入有效期");
				return false;
			}
			if (cardName1 == "请选择银行") {
				alert("请选择银行");
				return false;
			}
			if (statement_date1 == "请选择账单日") {
				alert("请选择账单日");
				return false;
			}
			if (repayment_date1 == "请选择还款日") {
				alert("请选择还款日");
				return false;
			}
			if (phone1 == "" || phone1 == null) {
				alert("请输入手机号");
				return false;
			}
			if (code1 == "" || code1 == null) {
				alert("请输入验证码");
				return false;
			}
			$.ajax({
				type: 'POST',
				url: "http://www.rice.com/app/api/h5_access",
				contentType: "application/x-www-form-urlencoded; charset=utf-8",
				datatype: "JSON",
				data: {
					method: "Bankcredit|bind",
					token: token1,
					phone: phone1,
					cardNo: cardNo1,
					code: code1,
					cvn2: cvn21,
					PeriodValidity: PeriodValidity1,
					cardName: cardName1,
					statement_date: statement_date1,
					repayment_date: repayment_date1
				},
				success: function (data) {
					var data1 = JSON.parse(data);
					if (data1.status === 1) {
						alert(data1.message);
					} else if (Number(data1.status) == 2) {
						alert(data1.message);
						window.location.href = "login.html";
					} else {
						alert(data1.message);
						$("#tj_btn").attr("disabled", false);
					}
				}
			})
		})
	</script>
</body>

</html>